<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片标签 -->
      <el-card shadow="always">
        <!-- form表单及按钮 -->
        <el-row>
          <el-col :span="18">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px" size="small">
              <el-form-item label="关键字">
                <el-input v-model="formInline.keyword" placeholder="根据文章标题搜索"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formInline.state" placeholder="请选择">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="onClearFn" size="small">清除</el-button>
                <el-button type="primary" size="small" @click="searchFN">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button type="success" class="right" size="medium" icon="el-icon-edit" @click="addFN">新增技巧</el-button>
          </el-col>
        </el-row>
        <!-- 数据记录 -->
        <el-alert v-if="cResultTip" :title="cResultTip" type="info" class="alert" :closable="false" show-icon>
        </el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table :data="tableData" element-loading-text="给我一点时间" fit highlight-current-row style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="80">
          </el-table-column>
          <el-table-column align="left" label="文章标题">
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
              <el-link icon="el-icon-film" v-if="Boolean(scope.row.videoURL)" @click="vidFN(scope.row)"></el-link>
            </template>
          </el-table-column>
          <el-table-column align="left" label="阅读数" width="80">
            <template slot-scope="scope">
              <span>{{scope.row.visits}}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" width="100">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="录入时间" width="180">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="状态" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="visitFN(scope.row.id)">预览</el-button>
              <el-button size="mini" type="text" @click="changeFN(scope.row)">{{scope.row.state== 1 ? '禁用' : '启用'}}
              </el-button>
              <el-button size="mini" type="text" :disabled="scope.row.state== 1 ? false : true" @click="modifyFN(scope.row)">修改</el-button>
              <el-button size="mini" type="text" :disabled="scope.row.state== 1 ? false : true"
                @click="elFN(scope.row)">删除</el-button>
                 <!-- 游览弹出层 -->
              <!-- :before-close="handleClose" -->
              <el-dialog title="预览文章" :visible.sync="showyl" width="70%">
                <h2>{{formInlines.title}}</h2>
                <span>{{formInlines.createTime | parseTimeByString}}</span> <span>{{scope.row.username}}</span> <i
                  class="el-icon-view"></i>
                <span>{{formInlines.visits}}</span>
                <div class="timen" v-html="formInlines.articleBody"></div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->

        <!-- 分页 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formInline.page"
            :page-sizes="[5, 10, 20, 50]" :page-size="formInline.pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 视频播放弹层 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="680px" heigth="400px">
      <video-player class="vjs-default-skin vjs-big-play-centered" :options="playerOptions">
      </video-player>
    </el-dialog>

    <!-- 添加修改弹层 -->
    <!-- :before-close="handleClose" -->
    <el-dialog :title="isEdit ? '编辑文章' : '新增文章'" :visible.sync="showadd" width="80%" >
        <Articlesadd @showFN='closeFN' :isEdit='isEdit'  :objs='this.objs' v-if="showadd"></Articlesadd>
    </el-dialog>

  </div>
</template>

<script>
import {
  list,
  remove,
  changeState,
  detail
} from '@/api/hmmm/articles'
import Articlesadd from '../components/articles-add'

export default {
  data () {
    return {
      // 视频配置属性*************
      playerOptions: {
        // 视频配置项
        width: '640', // 显示的视频宽
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果true, 浏览器准备好时开始回放
        autoplay: false,
        // 默认情况下将会消除任何音频
        muted: false,
        // 导致视频一结束就重新开始
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据 auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
        preload: 'auto',
        sources: [{
          type: 'video/mp4', // 类型
          src: '' // url地址
        }],
        // 封面地址
        poster: '',
        // 允许覆盖video js无法播放媒体源时显示的默认信息
        notSupportedMessage: '此视频暂无法播放,请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      },
      formInline: {
        keyword: '',
        state: null,
        page: 1, // 当前页数
        pagesize: 10
      },
      total: 0, // 总条数
      tableData: [],
      dialogVisible: false, // 控制视频显示层
      title: '', // 视频标题
      showyl: false, // 控制游览弹出层
      showadd: false, // 控制添加修改弹出层
      formInlines: { // 游览的对象
        articleBody: '', // 文章内容
        createTime: '', // 时间
        title: '', // 文章标题
        visits: 0 // 游览人数
      },
      objs: {},
      isEdit: false,
      zujian: false

    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 查询列表 页面加载调用的函数
    async getList () {
      const res = await list(this.formInline)
      console.log(res)
      //   取出总条数
      this.total = res.data.counts
      //   取出返回的数据
      this.tableData = res.data.items
    },
    // 删除成功调用的函数*******
    async doelFN (data) {
      const rs = await remove(data)
      console.log(rs)
      this.getList()
    },
    // 视频点击触发函数******************
    vidFN (res) {
      this.title = res.title
      this.dialogVisible = true
      this.playerOptions.sources[0].src = res.videoURL
    },
    // 添加*******
    addFN () {
      this.showadd = true

      this.isEdit = false
    },
    // 删除按钮
    elFN (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doelFN(data)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // console.log(id)
      // this.doelFN(data)
    },
    // 修改********
    modifyFN (rowobj) {
      this.isEdit = true
      this.showadd = true
      this.objs = rowobj
    },
    //   点击搜索
    async searchFN () {
      this.$set(this.formInline, 'page', 1)
      this.getList()
      this.formInline = {
        keyword: '',
        state: null,
        page: 1, // 当前页数
        pagesize: 10
      }
    },
    // 点击清除
    onClearFn () {
      this.formInline = {
        keyword: '',
        state: null,
        page: 1, // 当前页数
        pagesize: 10
      }
      this.getList()
    },
    // 点击游览*****
    async visitFN (id) {
      const res = await detail({ id })
      // console.log(res)
      this.formInlines = res.data
      this.showyl = true
    },
    // 点击禁用按钮
    async changeFN (data) {
      // eslint-disable-next-line no-unused-expressions
      // console.log(data)
      // eslint-disable-next-line no-unused-expressions
      if (data.state === 0) {
        data.state = 1
        this.$message.success('启用成功')
      } else {
        this.$message.success('禁用成功')
        data.state = 0
      }
      await changeState(data)

      this.getList()
    },
    // 这是分页调用的函数
    handleSizeChange (val) {
      // console.log(' 条8888888')
      this.formInline.pagesize = val
      this.getList()
    },
    // 这是分页调用的函数
    handleCurrentChange (val) {
      // console.log('当前页: 999999999')
      this.formInline.page = val
      this.getList()
    },
    // 子组件取消触发的事件
    closeFN () {
      this.showadd = false

      this.getList()
    }

    // handleClose () {
    //   this.showadd = false
    // }
  },
  computed: {
    cResultTip () { // 计算属性显示多少条数据
      return `数据一共 ${this.total} 条`
    }
  },
  components: {
    Articlesadd
  }
}

</script>

<style scoped lang='scss'>
  .right {
    float: right;
  }

  .el-link {
    font-size: 18px;
    color: #00f;
  }

  .alert {
    margin-bottom: 15px;
  }

  .demo {
    display: inline-block;
    width: 600px;
    height: 338px;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0.0, 2);
    margin-right: 4px;
  }

  .block {
    float: right;
  }

  .timen {
    // height: 80px;
    // line-height: 80px;
    background-color: #f5f5f5;
    border-top: 1px dotted #000;
    // overflow: hidden;
  }
  .app-container{
    padding: 10px;
  }

</style>
